<template>
  <a-layout-sider class="layout-sider" :width="width">
    <!--<a-menu-->
    <!--    mode="inline"-->
    <!--    theme="dark"-->
    <!--    :selectedKeys="selectedKeys"-->
    <!--    :inline-collapsed="collapsed"-->
    <!--    @click="menuClick"-->
    <!--&gt;-->
    <!--  <template v-for="(item) in menuData">-->
    <!--    <a-menu-item class="menu-item" v-if="!item.children" :key="item.name">-->
    <!--      <span>{{ item.meta.title }}</span>-->
    <!--    </a-menu-item>-->
    <!--    <a-sub-menu class="menu-item" v-else :key="item.name">-->
    <!--      <span slot="title">-->
    <!--        <span>{{ item.meta.title }}</span>-->
    <!--      </span>-->
    <!--      <template v-for="(subItem) in item.children">-->
    <!--        <a-menu-item :key="subItem.name">-->
    <!--          <span>{{ subItem.meta.title }}</span>-->
    <!--        </a-menu-item>-->
    <!--      </template>-->
    <!--    </a-sub-menu>-->
    <!--  </template>-->
    <!--</a-menu>-->
    <i-menu
        :collapsed="collapsed"
        :options="menuData"
        theme="dark"
        class="menu"
        @select="onSelect"
    />
  </a-layout-sider>
</template>

<script>
import {mapGetters} from 'vuex'
import IMenu from "@/components/menu/menu";

export default {
  name: "layout-sider",
  components: {IMenu},
  computed: {
    ...mapGetters(['menuData']),
  },
  data() {
    return {
      collapsed: false,
      selectedKeys: [],
      width: 260
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    menuClick({key}) {
      // console.log(item, key, keyPath)
      this.$router.push({name: key})
      this.selectedKeys = [this.$route.name]
    },
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    autoSize() {
      let width = window.innerWidth
      if (width < 1500) {
        this.width = 240
      } else {
        this.width = 260
      }
    }
  },
  created() {
    // this.selectedKeys = [this.$route.name]
  },
  mounted() {
    this.autoSize()
    window.addEventListener('resize', this.autoSize)
  },
  destroyed() {
    window.removeEventListener('resize', this.autoSize)
  }
};
</script>

<style scoped lang="less">
.layout-sider {
  //margin-bottom: -48px;
  padding: 10px !important;
  background: url("~@/assets/img/layout/layout-side-bg.png") no-repeat bottom / 95% 100% !important;
  //background-color: transparent;
  overflow: auto;

  .menu-item {
    font-family: YouSheBiaoTiHei;

    .ant-menu-item {
      font-family: OPPOSans;
    }
  }

  ::v-deep .ant-layout-sider-children {
    overflow: auto;
  }
  //::v-deep .ant-menu {
  //  box-shadow: none;
  //  &>.ant-menu-item,.ant-menu-submenu {
  //    //font-family: YouSheBiaoTiHei;
  //  }
  //
  //  &:not(.ant-menu-horizontal) .ant-menu-item-selected {
  //    background: url('~@/assets/img/layout/menu-active-bg.png') no-repeat center left  / 100% 100%;
  //  }
  //
  //  .ant-menu-sub {
  //    .ant-menu-submenu .ant-menu-submenu-title {
  //      font-size: 18px;
  //    }
  //    .ant-menu-item {
  //      font-size: 18px;
  //    }
  //  }
  //}
}

</style>
